/* flex  布局                                                                                                                                                                                          */

.flex-wrap,
.flex-column-wrap,
.flex-center-wrap,
.flex-bottom-wrap,
.flex-multi-row,
.flex-center {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}

/* 多行flex布局                                                                                                                                                                                                           */

.flex-multi-row {
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

/* 元素默认竖直居中                                                                                                                                                                                */

.flex-item-wrap {
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
}

.flex-center-wrap {
  -webkit-align-items: center;
  align-items: center;
}

/*水平垂直居中                                                                                                        */

.flex-center {
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}

/* 元素底部对齐                                                                                                                                                                                */

.flex-bottom-wrap {
  -webkit-align-items: flex-end;
  align-items: flex-end;
}

.flex-justify-center {
  -webkit-justify-content: center;
  justify-content: center;
}

/* 从行尾位置开始排列                                                                                                                                                                        */
.flex-justify-end {
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}

.flex-justify-around {
  -webkit-justify-content: space-around;
  justify-content: space-around;
}

.flex-justify-between {
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.flex {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}

.flex-column-wrap {
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.m-l-5 {
  margin-left: 5px;
}

.m-l-15 {
  margin-left: 15px;
}

.m-l-20 {
  margin-left: 20px;
}

.m-l-30 {
  margin-left: 30px;
}

.m-l-50 {
  margin-left: 50px;
}

.m-t-5 {
  margin-top: 5px;
}

.m-t-15 {
  margin-top: 15px;
}

.m-t-20 {
  margin-top: 20px;
}

.m-t-30 {
  margin-top: 30px;
}

.m-t-50 {
  margin-top: 50px;
}

.m-b-5 {
  margin-bottom: 5px;
}

.m-b-10 {
  margin-bottom: 10px;
}

.m-b-15 {
  margin-bottom: 15px;
}

.m-b-20 {
  margin-bottom: 20px;
}

.m-t-10 {
  margin-top: 10px;
}

.m-r-5 {
  margin-right: 5px;
}

.m-r-8 {
  margin-right: 8px;
}

.m-r-10 {
  margin-right: 10px;
}

.m-r-15 {
  margin-right: 15px;
}

.m-r-20 {
  margin-right: 20px;
}

.m-r-25 {
  margin-right: 25px;
}

.m-r-30 {
  margin-right: 30px;
}

.m-l-10 {
  margin-left: 10px;
}

.m-l-r-5 {
  margin-left: 5px;
  margin-right: 5px;
}

.f-10 {
  font-size: 10px;
}

.f-12 {
  font-size: 12px;
}

.f-13 {
  font-size: 13px;
}

.f-14 {
  font-size: 14px;
}

.f-15 {
  font-size: 15px;
}

.f-16 {
  font-size: 16px;
}

.f-18 {
  font-size: 18px;
}

.f-20 {
  font-size: 20px;
}

.f-24 {
  font-size: 24px;
}

.f-28 {
  font-size: 28px;
}

.f-32 {
  font-size: 32px;
}

.f-500 {
  font-weight: 500;
}

.f-550 {
  font-weight: 550;
}

.f-600 {
  font-weight: 600;
}

.f-700 {
  font-weight: 700;
}

.f-b {
  font-weight: bold;
}

.p-15 {
  padding: 15px;
}

.p-10 {
  padding: 10px;
}

.p-20 {
  padding: 20px;
}

.p-r-5 {
  padding-right: 5px;
}

.p-r-10 {
  padding-right: 10px;
}

.p-r-15 {
  padding-right: 15px;
}

.p-r-20 {
  padding-right: 20px;
}

.p-t-5 {
  padding-top: 5px;
}

.p-t-10 {
  padding-top: 10px;
}

.p-t-15 {
  padding-top: 15px;
}

.p-t-20 {
  padding-top: 20px;
}

.p-b-5 {
  padding-bottom: 5px;
}

.p-b-10 {
  padding-bottom: 10px;
}

.p-b-15 {
  padding-bottom: 15px;
}

.p-b-20 {
  padding-bottom: 20px;
}

.p-l-0 {
  padding-left: 0px;
}

.p-l-5 {
  padding-left: 5px;
}

.p-l-10 {
  padding-left: 10px;
}

.p-l-15 {
  padding-left: 15px;
}

.p-l-20 {
  padding-left: 20px;
}

.p-l-25 {
  padding-left: 25px;
}

.p-5 {
  padding: 5px;
}

.p-8 {
  padding: 8px;
}

.p-5-10 {
  padding: 5px 10px;
}

.p-10-15 {
  padding: 10px 15px;
}

.p-10-20 {
  padding: 10px 20px;
}

.c-555 {
  color: #555;
}

.c-777 {
  color: #777;
}

.c-999 {
  color: #999;
}

.c-f5 {
  color: #f5f5f5;
}

.c-aaa {
  color: #aaa;
}

.c-ccc {
  color: #ccc;
}

.c-fff {
  color: #fff;
}

.min-w-50 {
  min-width: 50px;
}
.vw-100 {
  width: 100vw;
}

.w-30 {
  width: 30px;
}
.w-34 {
  width: 34px;
}

.w-40 {
  width: 40px;
}
.w-116{
  width: 116px;
}

.w-200 {
  width: 200px;
}

.w-220 {
  width: 220px;
}

.w-230 {
  width: 230px;
}

.w-300 {
  width: 300px;
}

.w-1100 {
  width: 1100px;
}
.w-1200 {
  width: 1200px;
}

.pr {
  position: relative;
}

.f-blod {
  font-weight: blod;
}

.kl-bar {
  overflow-y: auto;
}

.kl-bar::-webkit-scrollbar {
  width: 6px;
}

.kl-bar::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #ccc;
}

.no-wrap {
  white-space: nowrap;
}

.bg-fc {
  background-color: #fcfcfc;
}

.bg-f5 {
  background-color: #f5f5f5;
}

.bg-fff {
  background-color: #fff;
}

.flex-1 {
  flex: 1;
}

.h-v-100 {
  height: 100vh;
}

.m-h-58 {
  min-height: 58px;
}

.h-b-100 {
  height: 100%;
}

.h-10 {
  height: 10px;
}

.h-20 {
  height: 20px;
}

.h-30 {
  height: 30px;
}
.h-34 {
  height: 34px;
}

.h-40 {
  height: 40px;
}

.h-36 {
  height: 36px;
}

.h-40 {
  height: 40px;
}

.h-45 {
  height: 45px;
}

.h-50 {
  height: 50px;
}

.h-60 {
  height: 60px;
}

.h-200 {
  height: 200px;
}

.l-h-28 {
  line-height: 28px;
}

.l-h-30 {
  line-height: 30px;
}

.h-100vh {
  height: 100vh;
}

.w-s-n {
  white-space: nowrap;
}

.b-r-4 {
  border-radius: 4px;
}

.b-r-6 {
  border-radius: 6px;
}

.b-r-8 {
  border-radius: 8px;
}

.d-n {
  display: none;
}

.p-f {
  position: fixed;
}

.o-h {
  overflow: hidden;
}

.o-f-h {
  overflow: hidden;
}

.p-a {
  position: absolute;
}

.d-i-b {
  display: inline-block;
}

.c-danger {
  color: #f00;
}
.c-primary {
  color: #007bff;
}
.c-success {
  color: #28a745;
}
.c-info{
  color: #17a2b8;
}
.c-warning{
  color: #ffc107;
}

.cu{
  cursor: pointer;
}

.m-center{
  margin: 0 auto;
}
